<template>
    <el-space fill direction="vertical" style="width:100%">
        <el-card header="基本用法" shadow="never">
            <p>页面形式，结果状态为：success、error、warning、info、404。</p>
            <div class="result-list">
                <Result status="success" title="Success!" desc="来自小可爱的成功回复！" />
                <Result
                    status="error"
                    desc="出现了一点小错误～联系小可爱帮你解决吧～～～"
                    btn-text="返回首页"
                    @extra-click="handleExtraClick"
                />
                <Result
                    status="warning"
                    title="Warning!"
                    desc="那里不可以！！！"
                    btn-text="返回首页"
                    @extra-click="handleExtraClick"
                />
                <Result status="info" title="Info!" desc="小可爱的秘密信息！" />
                <Result status="404" title="哦吼～网页飞哪儿去了？">
                    <template #extra>
                        <el-button type="primary">返回首页</el-button>
                    </template>
                </Result>
            </div>
        </el-card>
        <el-card header="自定义" shadow="never">
            <div class="result-list">
                <Result title="哦吼～网页飞哪儿去了？">
                    <template #icon>
                        <img
                            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                            alt=""
                        />
                    </template>
                </Result>
            </div>
        </el-card>
    </el-space>
</template>

<script setup lang="ts">
import Result from "@/components/result/index.vue";
import { ElMessage } from "element-plus";

const handleExtraClick = () => ElMessage.info("点击了扩展按钮");
</script>

<style lang="scss" scoped>
.result-list {
    display: flex;
    flex-wrap: wrap;
    .result {
        width: 33.33%;
        margin-bottom: 20px;
    }
}
</style>
